<template>
  <div>
    <h1>新增商品</h1>
    <el-form label-width="100px" class="demo-ruleForm" style="width:50%;margin:0 auto">
      <el-form-item label="商品名称">
        <el-input type="text" v-model="goods.name"></el-input>
      </el-form-item>
      <el-form-item label="商品种类">
        <el-input type="text" v-model="goods.classify"></el-input>
      </el-form-item>
      <el-form-item label="适用宠物">
        <el-input v-model="goods.pet"></el-input>
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="goods.price"></el-input>
      </el-form-item>
      <el-form-item label="重量">
        <el-input v-model="goods.weight"></el-input>
      </el-form-item>
      <el-form-item label="生产日期">
        <el-input v-model="goods.production"></el-input>
      </el-form-item>
      <el-form-item label="保质期">
        <el-input v-model="goods.shelfLife"></el-input>
      </el-form-item>
      <el-form-item label="产地">
        <el-input v-model="goods.producer"></el-input>
      </el-form-item>
      <!-- <el-form-item label="图片"  >
        <el-input v-model="goods.images"></el-input>
      </el-form-item>-->

      <el-form-item label="商品描述">
        <el-input v-model="goods.desc"></el-input>
      </el-form-item>
      <el-form-item label="所属门店">
        <el-input v-model="goods.shopId"></el-input>
      </el-form-item>
      <el-upload
        class="upload-demo"
        :before-upload="beforeupload"
        action="https://jsonplaceholder.typicode.com/posts/"
        style="margin-left:80px;"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">点击上传</div>
        <img :src="src" alt style="width:100%;" />
      </el-upload>
      <el-form-item>
        <el-button type="primary" @click="addgoods">确认新增</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      goods: {
        name: "",
        classify: "",
        pet: "",
        price: "",
        weight: "",
        production: "",
        shelfLife: "",
        producer: "",
        images: [],
        desc: "",
        shopId: ""
      },
      form: {
        //form里面的参数
        name: ""
      },
      param: "", //表单要提交的参数
      src:'',
    };
  },
  methods: {
    addgoods() {
      const {
        name,
        classify,
        pet,
        price,
        weight,
        production,
        shelfLife,
        producer,
        images,
        desc,
        shopId
      } = this.goods;
     
      var names = this.form.name;
      //下面append的东西就会到form表单数据的fields中；
      this.param.append("message", names);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      //然后通过下面的方式把内容通过axios来传到后台
      //下面的this.$reqs 是在主js中通过Vue.prototype.$reqs = axios 来把axios赋给它;
      axios.post("/goods/addImages", this.param, config).then(function(result) {
        console.log(this.param, config);
      });
      //新增商品
       axios
        .post("/goods/addGoods", {
          name,
          classify,
          pet,
          price,
          weight,
          production,
          shelfLife,
          producer,
          images,
          desc,
          shopId
        })
        .then(res => {
          console.log(res.data);
        });
    },
    beforeRemove(file, fileList) {
        console.log(file,fileList);
      //return this.$confirm(`确定移除 ${ file.name }？`);
    },
    //阻止upload的自己上传，进行再操作
    beforeupload(file) {
     
      console.log(file);

      //创建临时的路径来展示图片
      var windowURL = window.URL || window.webkitURL;

      this.src = windowURL.createObjectURL(file);
      console.log(this.src);
     this.goods.images.push(this.src)
      //重新写一个表单上传的方法
      this.param = new FormData();
      this.param.append("file", file, file.name);
      return false;
    }
    //覆盖默认的上传行为
  }
};
</script>

<style>
</style>